<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue';

import { service } from '#/api/request';
import { DataTable } from '#/components/data-table';
import { useLogTable } from '#/views/quartz/data';

const props = defineProps<{
    enums: Record<string, any>;
}>();

const drawerHeight = ref(window.innerHeight * 0.75);

const columns = useLogTable(props.enums);

const logDataTableRef = ref<InstanceType<typeof DataTable>>();
const properties = reactive({
    visible: false,
    title: null,
    handle: {
        close: () => {
            properties.visible = false;
        },
        delete: (selections: { id: number }[]) => {
            const ids = selections.map((item) => item.id);
            service.confirm({
                message: `确定对所选任务日志进行删除操作，本次共计清除${ids.length}条记录?`,
                url: '/job/log',
                data: { id: ids },
                success: logDataTableRef.value?.refresh,
            });
        },
    },
});

// 展示弹窗
const open = (row: any) => {
    properties.visible = true;
    properties.title = row.name;
    nextTick(() => logDataTableRef.value?.refresh({ params: { jobId: row.id } }));
};

defineExpose({ open });
</script>

<template>
    <el-drawer v-model="properties.visible" :size="drawerHeight" :title="`${properties.title} 日志列表`" direction="btt">
        <DataTable ref="logDataTableRef" :columns="columns" api="/job/log" selection select-on-row-click lazy>
            <template #extra="{ selections }">
                <el-button v-auth="'quartz:job:log:remove'" @click="properties.handle.delete(selections)" :disabled="selections.length <= 0" type="danger" />
            </template>
            <template #status="{ form }">
                <el-select v-model="form.status" :empty-values="[null, undefined]">
                    <el-option label="全部" value="" />
                    <el-option v-for="(item, index) in enums.result" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </template>
        </DataTable>
    </el-drawer>
</template>

<style scoped></style>
